[小ネタ] プロジェクトのESLint設定ファイルはそのままに、任意のルールを適用する方法

この記事では、JavaScriptのリンターであるESLintが導入されているプロジェクトで、新米JSエンジニアがフォーマットの整ったコードを書くために利用できる設定をご紹介します。

はじめに

特定のコーディングスタイルに不慣れな場合、プロジェクトのESLintのルールだけでは不十分で、行儀の良くないコードを書いてしまうことがあります。（※）
もちろんレビューで指摘して貰えれば有り難いですが、指摘する方もそれほど気持ちの良いものでは無いかもしれません。
とは言え、あまりに基本的なルールだとプロジェクトのESLint設定ファイルに追加をリクエストするのは気が引けるし、一方同じ失敗は出来ないので、今後はリンターツールのせいにしたいところです。
そこで、プロジェクトの.eslintrc.jsonはそのままに、ルールを継承した上でさらに任意のルールを追加する方法を考えます。

※リンター以前にエディタがよしなに自動フォーマットしてくれる場合もあるでしょうし、逆にプロジェクトのESLint設定ファイルに直接追記しメンバーでルールを共有した方が良いケースもあると思います。

検証環境

以下、手元の検証環境です。

• Mac
  • macOS Mojave
• Visual Studio Code
  • バージョン: 1.38.0

  
$ node --version  
v10.15.3  
$ eslint --version  
v6.3.0  
$ vim --version | head -n 1  
VIM - Vi IMproved 8.1  （以下略）

ESLintの設定

eslintrcに以下の通りextendsオプションを加えます。

  
$ cd /path/to/my  
$ vi .eslintrc.json  

  
{  
    "extends": "/path/to/projectA/.eslintrc.json",  
    "rules":{  
        "semi-spacing": [  
            "error", {  
                "before": false,  
                "after" : true  
            }  
        ],  
    }  
}  

2行目：extendsのところに、ProjectA指定の設定ファイルのパスを書きます。
3行目：以降が追加したい任意のルールです。
ここでは一例として、セミコロン前後のスペースの有無に関するルールを追加しています。
（このルールが不慣れという方はあまり多くないと思いますが...）

エディタの設定

続いて、上記の設定ファイルをエディタで参照する設定です。 ここではVS CodeとVimの２つをご紹介します。

VS Codeの場合

ESLintのプラグインを追加後に以下をsettings.jsonに設定します。

  
{  
    "eslint.enable": true,  
    "eslint.options": {  
      "configFile": "/path/to/my/.eslintrc.json"  
    },  
}    

↓設定を反映しESLintを有効にしたイメージです。

Vimの場合(ALE Plugin利用)

ここでは非同期リンターのプラットフォームであるALEを使った例を紹介します。
※ALE自体の導入方法は以下を参照ください。ここでは割愛致します。
GitHub - Asynchronous Lint Engine

ALEプラグインを導入後に以下を.vimrcに設定します。

  
let g:ale_linters = {  
        \   'javascript': ['eslint'],  
        \}  
let g:ale_javascript_eslint_options="-c /path/to/my/.eslintrc.json"  

↓ALEをenableにした時のイメージです。

ご注意

ESLintは、まずリント対象のファイルが有るディレクトリの設定ファイルを探します。
次にそのディレクトリを起点に、親ディレクトリさらにその親ディレクトリと、プロジェクトのルートディレクトリを含む上位のディレクトリも探索し、設定ファイルが見つかればルールを適用します。
意図したルールとは異なるルールが反映されている際は、上位階層のディレクトリに設定ファイルがないか、または"root": trueの設定がどこかの設定ファイルで記載されていないかなど注意する必要があります。
詳しくは公式ドキュメントのConfiguration Cascading and Hierarchyの箇所をご参照下さい。
Configuring ESLint - ESLint - Pluggable JavaScript linter

さいごに

最後まで読んで頂きありがとうございました。
どなたかに届けば幸いです。